<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { GetData, PatchListSort, PostClientAccountLabels, PostClientAccountMessageGroup } from '@/api/modules/clientAccount.ts'
import { GetOptionData as GetLabelOption } from '@/api/modules/clientAccountLabel.ts'
import { GetOptionData as GeMessageGroupOption } from '@/api/modules/messageGroup.ts'

const inquireFrom = reactive({
  AdminId: '',
  Vid: '',
  Unionid: '',
  Mobile: '',
  Realname: '',
  UserId: '',
  AccountState: '',
})
const dataList: any = ref([])
// 加载
const loading = ref(false)
const total = ref(0) // 总数据数
let PageSize = 10 // 每页条数
let PageNum = 1

// 获取数据
function GetDataList(PageIndex: number = 1, PageSize: number = 10) {
  loading.value = true
  const params = {
    PageIndex,
    PageSize,
    ...(inquireFrom.AdminId && { AdminId: inquireFrom.AdminId }),
    ...(inquireFrom.Vid && { Vid: inquireFrom.Vid }),
    ...(inquireFrom.Unionid && { Unionid: inquireFrom.Unionid }),
    ...(inquireFrom.Mobile && { Mobile: inquireFrom.Mobile }),
    ...(inquireFrom.Realname && { Realname: inquireFrom.Realname }),
    ...(inquireFrom.UserId && { UserId: inquireFrom.UserId }),
    ...(inquireFrom.AccountState && { AccountState: inquireFrom.AccountState }),
  }
  GetData(params).then((res: any) => {
    if (res.succeeded) {
      dataList.value = res.data.items
      total.value = res.data.total
      loading.value = false
    }
    else {
      ElMessage.error('查询失败')
      loading.value = false
    }
  })
}

// 查询
function Inquire() {
  GetDataList(1, PageSize)
}

// 改变状态
function ChangeDataType(row: any) {
  const params = {
    accountState: row.accountState,
    id: row.id,
  }
  PatchListSort(params).then((res: any) => {
    if (res.succeeded) {
      ElMessage.success('操作成功')
    }
    else {
      ElMessage.error('修改失败')
      GetDataList(PageNum, PageSize)
    }
  })
}

// 绑定
const bindingDialog = ref(false)

const bindingFrom = ref({
  labelIdList: [],
  msgGroupId: '',
  id: '',
})

interface labelOptionList {
  id: number
  labelName: string
  labelType: number
  adminId: number
}
const labelOption = ref<labelOptionList[]>([])
interface messageGroupOptionList {
  id: number
  groupName: string
  adminId: number
}
const messageGroupOption = ref<messageGroupOptionList[]>([])

async function Binding(row: any) {
  // bindingFrom.value.labelIdList.length = 0
  bindingDialog.value = true
  bindingFrom.value.id = row.id
  bindingFrom.value.labelIdList = row.clientAccountLabels?.map((item: any) => item.id)
  bindingFrom.value.msgGroupId = row.msgGroupId !== 0 ? row.msgGroupId : ''
  const labelOptionData = await GetLabelOption({ adminid: row.adminId })
  // console.log(labelOptionData)
  labelOption.value = labelOptionData.data.filter((item: any) => item.labelType === 5)
  const messageGroupOptionData = await GeMessageGroupOption()
  messageGroupOption.value = messageGroupOptionData.data
}

function SubmitBinding() {
  // console.log(bindingFrom.value)
  if (bindingFrom.value.labelIdList || (bindingFrom.value.labelIdList as any)?.length === 0) {
    const labelParams = {
      id: bindingFrom.value.id,
      labelIdList: bindingFrom.value.labelIdList,
    }
    PostClientAccountLabels(labelParams).then((res: any) => {
      if (res.succeeded) {
        ElMessage.success('绑定标签成功')
        GetDataList()
      }
      else {
        ElMessage.error('绑定标签失败')
      }
    })
  }
  if (bindingFrom.value.msgGroupId !== '') {
    const messageGroupParams = {
      id: bindingFrom.value.id,
      msgGroupId: bindingFrom.value.msgGroupId,
    }
    PostClientAccountMessageGroup(messageGroupParams).then((res: any) => {
      if (res.succeeded) {
        ElMessage.success('绑定灵活欢迎语成功')
        GetDataList()
      }
      else {
        ElMessage.error('绑定灵活欢迎语失败')
      }
    })
  }
  bindingDialog.value = false
}

// 标签筛选
const activeNames = ref(['1'])
const tagDialog = ref(false)
const tagArr = ref([true, false])
const FromDara = ref({
  condition: '',
  search: '',
})
function Open() {
  tagDialog.value = true
  activeNames.value = ['1']
}

function OnChange(val: any) {
  tagArr.value[val] = !tagArr.value[val]
}

function TagScreen() {
  tagDialog.value = false
  const params = {
    condition: FromDara.value.condition,
    search: FromDara.value.search,
  }
  params.condition = params.condition === '' ? '1' : params.condition
}

// 页码
function handleSizeChange(val: number) {
  GetDataList(1, val)
  PageSize = val
}
function handleCurrentChange(val: number) {
  GetDataList(val, PageSize)
  PageNum = val
}

onMounted(() => {
  GetDataList()
})
</script>

<template>
  <PageMain>
    <SearchBar :show-toggle="false">
      <div class="header">
        <el-form>
          <div class="from">
            <!-- <el-form-item label="微信开放平台的唯一身份标识" style="grid-column: 1 / 3;">
              <el-input v-model="inquireFrom.Unionid" placeholder="请输入微信开放平台的唯一身份标识" clearable />
            </el-form-item> -->
            <el-form-item label="登录账户id">
              <el-input v-model="inquireFrom.AdminId" placeholder="请输入登录账户id" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="企微用户id">
              <el-input v-model="inquireFrom.Vid" placeholder="请输入企微用户id" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="inquireFrom.Mobile" placeholder="请输入手机号" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="inquireFrom.Realname" placeholder="请输入姓名" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="企微用户id">
              <el-input v-model="inquireFrom.UserId" placeholder="请输入企微用户id" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="inquireFrom.AccountState" placeholder="请选择状态" clearable>
                <el-option key="1" label="正常" :value="1" />
                <el-option key="2" label="已停用" :value="2" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="text-right">
          <el-button @click="Inquire">
            查询
          </el-button>
        </div>
      </div>
    </SearchBar>
    <ElDivider border-style="dashed" />
    <div class="mb-5 text-right">
      <el-button v-if="false" type="success" @click="Open">
        打开标签
      </el-button>
    </div>
    <el-table v-loading="loading" :data="dataList" stripe style="width: 100%;" border>
      <el-table-column align="center" prop="adminId" label="登录账户id" width="100" />
      <el-table-column align="center" prop="vid" label="企微用户id" width="200" />
      <el-table-column align="center" prop="corpid" label="企业id" width="200" />
      <!-- <el-table-column align="center" prop="unionid" label="微信开放平台的唯一身份标识" width="300" /> -->
      <el-table-column align="center" prop="adminVid" label="管理员vid" width="200" />
      <el-table-column align="center" prop="sex" label="性别" width="100">
        <template #default="scope">
          {{ scope.row.sex === 0 ? '未知' : scope.row.sex === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mobile" label="手机号" width="180" />
      <el-table-column align="center" prop="acctid" label="拼音化微信昵称" width="280" />
      <el-table-column align="center" prop="productName" label="头像" width="100">
        <template #default="scope">
          <el-avatar shape="square" :size="60" :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建记录时间戳" width="160" />
      <el-table-column align="center" prop="englishName" label="英文名" width="200" />
      <el-table-column align="center" prop="realname" label="姓名" width="150" />
      <!-- <el-table-column align="center" prop="mail" label="邮箱" width="200" /> -->
      <el-table-column align="center" prop="ownername" label="所有者名称" width="200" />
      <el-table-column align="center" prop="userId" label="企微用户id" width="200" />
      <el-table-column align="center" prop="nickname" label="昵称" width="150" />
      <!-- <el-table-column align="center" prop="position" label="职位" width="200" /> -->
      <!-- <el-table-column align="center" prop="accountState" label="状态" width="100">
        <template #default="scope">
          <el-tag>{{ scope.row.accountState === 1 ? '正常' : '已停用' }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="addTime" label="添加时间" width="200" />
      <!-- <el-table-column align="center" prop="labelIds" label="新用户标签id串" width="200" /> -->
      <!-- <el-table-column align="center" prop="clientAccountLabels" label="标签列表" width="200" /> -->
      <!-- <el-table-column align="center" prop="msgGroupId" label="消息组配置id" width="200" /> -->
      <!-- <el-table-column align="center" prop="miniAppShareCardGroups" label="消息组" width="200" /> -->
      <el-table-column align="center" prop="enable" label="启用" width="120" fixed="right">
        <template #default="scope">
          <el-switch
            v-model="scope.row.accountState"
            :active-value="1"
            :inactive-value="2"
            @click="ChangeDataType(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="enable" label="启用" width="120" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="Binding(scope.row)">
            绑定
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 10px;" />
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, ->, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog v-model="bindingDialog" title="绑定信息" width="500" :destroy-on-close="true">
      <el-form :model="bindingFrom">
        <el-form-item label="绑定标签">
          <el-select v-model="bindingFrom.labelIdList" placeholder="请选择" multiple>
            <el-option v-for="item in labelOption" :key="item.id" :label="item.labelName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="绑定消息组">
          <el-select v-model="bindingFrom.msgGroupId" placeholder="请选择">
            <el-option label="待绑定" :value="0" />
            <el-option v-for="item in messageGroupOption" :key="item.id" :label="item.groupName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bindingDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="SubmitBinding">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="tagDialog" title="标签筛选" width="500" :destroy-on-close="true">
      <el-radio-group v-model="FromDara.condition">
        <el-radio value="1">
          Option 1
        </el-radio>
        <el-radio value="2">
          Option 2
        </el-radio>
      </el-radio-group>
      <el-input v-model="FromDara.search" placeholder="Please input" />
      <el-collapse v-model="activeNames">
        <el-collapse-item title="Consistency" name="1">
          <el-check-tag v-for="(item, index) in tagArr" :key="index" :checked="item" type="primary" @change="OnChange(index)">
            Tag
          </el-check-tag>
        </el-collapse-item>
      </el-collapse>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tagDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="TagScreen">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </PageMain>
</template>

<style scoped>
.header {
  display: grid;
  grid-template-columns: 6fr 1fr;
  grid-gap: 20px;

  .from {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;

    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
